<template>
    <view class="page">
        <!-- tab -->
        <view class="integral-tab">
            <view class="tab" :class="{ action: activeTab === 0 }" @click="changeTab(0)">
                <text>全部</text>
            </view>
            <view class="tab" :class="{ action: activeTab === 1 }" @click="changeTab(1)">
                <text>收入</text>
            </view>
            <view class="tab" :class="{ action: activeTab === 2 }" @click="changeTab(2)">
                <text>支出</text>
            </view>
        </view>
        <!-- 记录列表 -->
        <view v-if="loading" class="loading">加载中...</view>
        <view v-else class="record-list">
            <view v-if="!filteredList.length" class="no-data">未获取到积分记录</view>
            <view class="list" v-for="(item, index) in filteredList" :key="index">
                <view class="title-date">
                    <view class="title">
                        <text>{{item.Describe}}</text>
                    </view>
                    <view class="date">
                        <text>{{item.CreateTime}}</text>
                    </view>
                </view>
                <view class="integral">
                    <text :class="{'add': item.IntegralNumber > 0}">{{item.IntegralNumber}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import integral from '../api/integral';
export default {
    data() {
        return {
            list: [],
            loading: false,
            activeTab: 0 
        };
    },
    computed: {
        filteredList() {
            if (this.activeTab === 0) {
                return this.list; // 全部记录
            } else if (this.activeTab === 1) {
                return this.list.filter(item => item.IntegralNumber > 0); // 收入记录
            } else {
                return this.list.filter(item => item.IntegralNumber < 0); // 支出记录
            }
        }
    },
    onLoad() {
        this.getIntegralList();
    },
    methods: {
        getIntegralList() {
            this.loading = true;
            integral.integralList({
                userId: 1
            }).then(res => {
                this.loading = false;
                if (!res.data) {
                    console.log('未获取到积分记录');
                    return;
                }
                this.list = res.data;
            }).catch(error => {
                this.loading = false;
                console.error('获取积分记录失败:', error);
            });
        },
        changeTab(index) {
            this.activeTab = index; 
        },
	    },
	}
</script>

<style scoped lang="scss">
	@import 'IntegralRecord.scss';
</style>
